<template>
  <div class="check-box flex">
    <label
      for="checkAll"
      class="pos-relative flex items-center"
      style="line-height: 1; text-align: center"
    >
      <span class="mr-1 checkbox" :class="{ 'is-checked': isChecked }">
        <input type="checkbox" id="checkAll" v-model="isChecked" />
        <template v-if="isChecked">
          <el-icon color="#fff" size="12"><Select /></el-icon>
        </template>
        <span class="checkbox__inner"></span>
      </span>
        <slot name="title"></slot>
    </label>
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import { Select } from "@element-plus/icons-vue";
const props = defineProps({
  checked: {
    type: Boolean,
    default: false,
  },
});
const isChecked = computed({
  get: () => props.checked,
  set: (value) => {
    emit("change", value);
  },
});
const emit = defineEmits(["change"]);
</script>
<style lang="scss" scoped>
.checkbox {
  position: relative;
  display: inline-block;
  margin-right: 8px;
  width: 18px;
  height: 18px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border: 1px solid #bfbfbf;
  background-color: #fff;
  border-radius: 50%;
  box-sizing: border-box;
  input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    outline: 0;
    z-index: 1;
    cursor: pointer;
  }
  .checkbox__inner {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 16px;
    height: 16px;
    border: 1px solid #fa2c19;
    border-radius: 50%;
    visibility: hidden;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
  }
  &.is-checked {
    background-color: #ff1818;
    border-color: #ff1818;
  }
}
</style>
